<script setup lang="ts">
import { useEbmHooks } from "@/views/ebm/utils/hook";
import PureTableBar from "@/components/RePureTableBar/src/bar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { Search, Refresh } from "@element-plus/icons-vue";
import { PROTOCOL_TYPE } from "@/api/ebm";

const {
  columns,
  ebmList,
  loading,
  reset,
  getEbmForm,
  getEbmList,
  rtcmGroupList,
  updateDialog,
  openUpdateDialog,
  updateEbm,
  firmwareList,
  pagination
} = useEbmHooks();
</script>

<template>
  <div class="main">
    <el-form
      :inline="true"
      class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
    >
      <el-form-item label="sn:">
        <el-input
          v-model="getEbmForm.sn"
          placeholder="请输入设备SN"
          clearable
        />
      </el-form-item>
      <el-form-item label="分组:">
        <el-select
          v-model="getEbmForm.groupId"
          class="w-[192px]!"
          placeholder="请选择分组"
          clearable
        >
          <el-option
            v-for="item in rtcmGroupList"
            :key="item.id"
            :label="item.groupName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input
          v-model="getEbmForm.remark"
          placeholder="请输入备注"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          :icon="useRenderIcon(Search)"
          @click="getEbmList"
          >查询</el-button
        >
        <el-button :icon="useRenderIcon(Refresh)" @click="reset"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <PureTableBar :title="'电子界桩列表'" :columns="columns" @refresh="reset">
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          highlight-current-row
          border
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :data="ebmList"
          :columns="dynamicColumns"
          :pagination="pagination"
          @page-size-change="getEbmList"
          @page-current-change="getEbmList"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }"
        >
          <template #operation="{ row }">
            <el-button
              class="reset-margin"
              link
              type="primary"
              @click="openUpdateDialog(row)"
            >
              修改
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
    <el-dialog
      v-model="updateDialog.visible"
      :title="updateDialog.title"
      width="40%"
      class="flex justify-center min-w-[600px]"
      style="flex-direction: column"
      draggable
    >
      <el-form
        ref="projectForm"
        style="width: 100%"
        label-width="140"
        label-position="left"
        :inline="true"
        :model="updateDialog.form"
        class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
      >
        <el-form-item
          label="采集间隔(分钟): "
          prop="sampleInv"
          :rules="[{ required: true, message: '采集间隔不能为空' }]"
        >
          <el-input
            v-model.trim.number="updateDialog.form.sampleInv"
            placeholder="请输入采集间隔"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>

        <el-form-item
          label="上报间隔(分钟): "
          prop="uploadInv"
          :rules="[{ required: true, message: '上报间隔不能为空' }]"
        >
          <el-input
            v-model.trim.number="updateDialog.form.uploadInv"
            placeholder="请输入上报间隔"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>

        <el-form-item
          label="触发阈值(mg): "
          prop="shockThreshold"
          :rules="[{ required: true, message: '触发阈值不能为空' }]"
        >
          <el-input
            v-model.trim.number="updateDialog.form.shockThreshold"
            placeholder="请输入触发阈值"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>

        <el-form-item
          label="OtaIp: "
          prop="tcp1Ip"
          :rules="[{ required: true, message: 'Ip不能为空' }]"
        >
          <el-input
            v-model.trim="updateDialog.form.tcp1Ip"
            placeholder="请输入第一路tcpIp"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
        <el-form-item
          label="Ota端口: "
          prop="tcp1Port"
          :rules="[{ required: true, message: '端口不能为空' }]"
        >
          <el-input
            v-model.trim.number="updateDialog.form.tcp1Port"
            placeholder="请输入第一路tcp1Port"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
        <el-form-item
          label="上报地址1Ip: "
          prop="tcp2Ip"
          :rules="[{ required: true, message: 'Ip不能为空' }]"
        >
          <el-input
            v-model.trim="updateDialog.form.tcp2Ip"
            placeholder="请输入"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
        <el-form-item
          label="上报地址1端口: "
          prop="tcp2Port"
          :rules="[{ required: true, message: '端口不能为空' }]"
        >
          <el-input
            v-model.trim.number="updateDialog.form.tcp2Port"
            placeholder="请输入Port"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
        <el-form-item
          label="上报地址1开关: "
          prop="tcp2Enable"
          :rules="[{ required: true, message: '请选择是否启用' }]"
        >
          <el-select
            v-model="updateDialog.form.tcp2Enable"
            placeholder="请选择是否启用"
            clearable
            class="!w-[20vw] min-w-[400px]"
          >
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="上报地址1协议: "
          prop="tcp2Protocol"
          :rules="[{ required: true, message: '协议不能为空' }]"
        >
          <el-select
            v-model.trim="updateDialog.form.tcp2Protocol"
            placeholder="请输入第二路上报协议"
            clearable
            class="!w-[20vw] min-w-[400px]"
          >
            <el-option label="基础报文" :value="PROTOCOL_TYPE.BASICS" />
            <el-option
              label="智能电子界桩"
              :value="PROTOCOL_TYPE.EBM_JW_S350"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="上报地址2Ip: "
          prop="tcp3Ip"
          :rules="[{ required: true, message: 'Ip不能为空' }]"
        >
          <el-input
            v-model.trim="updateDialog.form.tcp3Ip"
            placeholder="请输入第三路tcpIp"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
        <el-form-item
          label="上报地址2端口: "
          prop="tcp3Port"
          :rules="[{ required: true, message: '端口不能为空' }]"
        >
          <el-input
            v-model.trim.number="updateDialog.form.tcp3Port"
            placeholder="请输入端口"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
        <el-form-item
          label="上报地址2开关: "
          prop="tcp3Enable"
          :rules="[{ required: true, message: '请选择是否启用' }]"
        >
          <el-select
            v-model="updateDialog.form.tcp3Enable"
            placeholder="请选择是否启用"
            clearable
            class="!w-[20vw] min-w-[400px]"
          >
            <el-option label="是" :value="true" />
            <el-option label="否" :value="false" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="上报地址2协议: "
          prop="tcp3Protocol"
          :rules="[{ required: true, message: '协议不能为空' }]"
        >
          <el-select
            v-model.trim="updateDialog.form.tcp3Protocol"
            placeholder="请输入第三路上报协议"
            clearable
            class="!w-[20vw] min-w-[400px]"
          >
            <el-option label="基础报文" :value="PROTOCOL_TYPE.BASICS" />
            <el-option
              label="智能电子界桩"
              :value="PROTOCOL_TYPE.EBM_JW_S350"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="固件版本:"
          prop="version"
          :rules="[{ required: true, message: '请选择升级固件版本' }]"
        >
          <el-select
            v-model="updateDialog.form.version"
            placeholder="请选择"
            clearable
            class="!w-[20vw] min-w-[400px]"
          >
            <el-option
              v-for="item in firmwareList"
              :key="item.version"
              :label="item.version"
              :value="item.version"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="备注: " prop="remark">
          <el-input
            v-model.trim="updateDialog.form.remark"
            type="textarea"
            clearable
            class="!w-[20vw] min-w-[400px]"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span
          class="dialog-footer"
          style="width: 100%; display: flex; justify-content: center"
        >
          <el-button type="primary" @click="updateEbm"> 确定 </el-button>
          <el-button @click="updateDialog.visible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>
